<template>
    <el-card class="card" shadow="hover" :body-style="{ padding: '0px',position: 'relative' }">
        <div @click="$emit('more')" class="top">
            <i class="el-icon-more"></i>
        </div>
        <el-image :src="thumbnailSrc" class="image">
            <div slot="error">
                <div class="image-error">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </div>
        </el-image>
        <div style="padding: 14px;">
            <span>{{name}}</span>
            <div class="description">
                <span>  {{description}}</span>
            </div>
            <div class="bottom clearFix">
                <span class="watcher">观看人数:{{watcher}}</span>
                <el-tooltip :class="{'right-space':haveTip}" :disabled="!haveTip" :content="toolTipContent">
                    <el-badge :type="badgeType" :value="badgeValue">
                        <el-button @click="$emit('play')" type="success" plain>播放视频</el-button>
                    </el-badge>
                </el-tooltip>
            </div>
        </div>
    </el-card>
</template>

<script>
import VideoStates from "~/components/file-list/video-list/VideoStates";
export default {
    name: "VideoCard",
    props:{
        thumbnailSrc: {
            type: String,
            required: true,
        },
        name: {
            type: String,
            default: "",
        },
        watcher: {
            type: Number,
            default: 0,
        },
        state: {
            type: Number,
            default: -1,
        },
        description: {
            type: String,
            default: "",
        }
    },
    computed:{
        badgeValue(){
            if(this.state===VideoStates.PROCESSING){
                return "正在处理";
            } else if(this.state===VideoStates.ENCODING){
                return "正在编码";
            } else if(this.state===VideoStates.ERROR){
                return "处理失败";
            }
            return "";
        },
        badgeType(){
            if(this.state===VideoStates.PROCESSING){
                return "warning";
            } else if(this.state===VideoStates.ENCODING){
                return "primary";
            } else if(this.state===VideoStates.ERROR){
                return "danger";
            }
            return "info";
        },
        toolTipContent(){
            if(this.state===VideoStates.PROCESSING){
                return "服务器正在处理视频，暂时无法查看缩略图。暂时可能出现视频无法正常播放的情况。\n如果长时间处于当前状态，您可以尝试删除并重新上传该视频。";
            } else if(this.state===VideoStates.ENCODING){
                return "服务器正在编码视频，暂时可能出现视频无法正常播放的情况。\n如果长时间处于当前状态，您可以尝试删除并重新上传该视频。";
            } else if(this.state===VideoStates.ERROR){
                return "视频处理失败，您可以尝试删除并重新上传该视频。";
            }
            return "";
        },
        haveTip(){
            return Boolean(this.toolTipContent);
        },
    },
}
</script>

<style scoped>
.image {
    width: 100%;
    margin: 0 auto;
    display: block;
}
.image-error{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
}
.clearFix:before,
.clearFix:after {
    display: table;
    content: "";
}

.clearFix:after {
    clear: both
}
.description{
    font-size: 13px;
    color: #606266;
}
.watcher {
    font-size: 13px;
    color: #999;
    margin-right: auto;
}
.right-space {
    margin-right: 45px;
}
.top {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 30px;
    z-index: 10;
    border-radius: 5px;
    background-color: #00000055;
    cursor: pointer;
}
.top i{
    text-align: center;
    width: 100%;
    line-height: 30px;
    font-size: 2em;
    color: white;
}
.card:hover .top{
    display: block;
}
</style>
